<template>
  <div class="schedule">
    <div class="content">
      <div class="content-top">
        <div class="content-title">{{ rowdata.projectName }}</div>
      </div>
      <div class="content-bottom">
        <div class="item">
          <div class="title">立项时间：</div>
          <div class="text">{{ rowdata.createTime }}</div>
        </div>
        <div class="item">
          <div class="title">项目状态：</div>
          <div class="text" style="color: #72b0f5">
            {{ rowdata.projectStatusName }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="tooltip"
      v-if="[1, 3, 5, 6, 7].includes(projectForm.projectStatus)"
    >
      <img src="/src/assets/images/Lament.png" alt="" style="width: 20px" />
      <div class="text">
        {{ rowdata.projectStatusRemark }}
      </div>
    </div>
    <el-collapse v-model="activeNames">
      <!-- 基础信息 -->
      <el-collapse-item name="1">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">商务进度情况</span>
        </template>
        <div class="schedule-form">
          <el-form
            :model="scheduleForm"
            ref="scheduleFormRef"
            :rules="queryRules"
            label-width="100px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="合同签订状态："
                  label-width="120"
                  prop="includeContract"
                >
                  <el-select
                    v-model="scheduleForm.includeContract"
                    placeholder="请选择"
                    clearable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="dict in statusList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  label="质保时间："
                  label-width="120"
                  prop="followTime"
                >
                  <el-date-picker
                    v-model="scheduleForm.dateValue"
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <div class="form">
              <div class="form-left">
                <div class="item">商务进度</div>
                <div
                  class="item"
                  :class="activeindex == index ? 'activeitem' : ''"
                  v-for="(item, index) in BusScheduleList"
                  :key="index"
                  @click="handlerBusSchedule(item, index)"
                >
                  {{ item.name }} ({{
                    item.performance !== undefined
                      ? item.performance == 0
                        ? "未完成"
                        : "已完成"
                      : "待完成"
                  }})
                </div>
              </div>
              <div class="form-right">
                <div class="right-title">{{ presentBusinessScheduleName }}</div>
                <!-- <div class="subtitle">
                  <div class="dot"></div>
                  <div class="text">完成情况</div>
                </div> -->
                <div class="right-form">
                  <el-form
                    :model="formdata"
                    ref="formdataRef"
                    :rules="formdataqueryRules"
                    label-width="100px"
                    class="right-form"
                  >
                    <el-row>
                      <el-col :span="12">
                        <el-form-item
                          label="是否完成："
                          label-width="120"
                          prop="performance"
                        >
                          <el-radio-group v-model="formdata.performance">
                            <el-radio :label="0">未完成</el-radio>
                            <el-radio :label="1">已完成</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          label="完成时间"
                          label-width="120"
                          prop="finishTime"
                          v-if="formdata.performance == 1"
                        >
                          <el-date-picker
                            v-model="formdata.finishTime"
                            format="YYYY/MM/DD"
                            class="search-input"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择"
                          />
                        </el-form-item>
                        <!-- <el-form-item
                          label="完成时间"
                          label-width="120"
                          prop=""
                          v-else
                        >
                          <el-date-picker
                            v-model="formdata.finishTime"
                            format="YYYY/MM/DD"
                            class="search-input"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择"
                          />
                        </el-form-item> -->
                      </el-col>
                    </el-row>
                    <el-row> </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item
                          label="相关文档："
                          label-width="120"
                          prop="fileInfoVos"
                        >
                          <Upload
                            :fileList="formdata.fileInfoVos"
                            :limit="5"
                            limitation="schedule"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="true"
                            :maxSize="10 * 1024 * 1024"
                            :showButton="formdata.fileInfoVos.length < 5"
                            @success="(result) => uploadSuccess(result)"
                            @deleteFile="(result) => uploadRemove(result)"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item
                          label="最新情况说明："
                          label-width="120"
                          prop="remark"
                        >
                          <!-- style="width: 100%; height: 100%" -->
                          <el-input
                            v-model="formdata.remark"
                            type="textarea"
                            :rows="5 + (5 - formdata.fileInfoVos.length) * 2"
                            maxlength="500"
                            placeholder="请填写"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">销售清单列表</span>
          <div class="marketbutton">
            <el-button type="primary" @click.stop="handleSaleOperate"
              ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
              >添加</el-button
            >
          </div>
        </template>
        <div class="contact-info">
          <el-table
            :data="projectForm.projectSaleInfoRespVos"
            border
            height="180px"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              label="操作"
              align="center"
              :show-overflow-tooltip="true"
              width="100px"
            >
              <template #default="{ row, $index }">
                <div class="table-operate">
                  <img
                    src="@/assets/icons/images/edit.png"
                    class="table-icon"
                    title="编辑"
                    @click="handleOperateSec('edit', row, $index)"
                  />
                  <img
                    src="@/assets/icons/images/delete.png"
                    class="table-icon"
                    title="删除"
                    @click="handleOperateSec('delete', row, $index)"
                  />
                </div> </template
            ></el-table-column>
            <el-table-column
              label="销售类目"
              prop="saleCategoryName"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="设备品牌"
              prop="brand"
              :show-overflow-tooltip="true"
              min-width="160"
            >
              <template #default="scope">
                {{ scope.row.brand || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              label="设备/平台名称"
              prop="purchaseName"
              :show-overflow-tooltip="true"
              min-width="160"
            >
              <template #default="scope">
                {{ scope.row.purchaseName || scope.row.platformName || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              label="设备数量"
              prop="quantity"
              :show-overflow-tooltip="true"
              min-width="160"
            >
              <template #default="scope">
                {{ scope.row.quantity || "--" }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="单位"
              prop="materialUnitName"
              :show-overflow-tooltip="true"
              min-width="160"
              ><template #default="scope">
                {{ scope.row.materialUnitName || "--" }}
              </template>
            </el-table-column> -->
            <el-table-column
              label="技术参数"
              prop="technologyParameter"
              :show-overflow-tooltip="true"
              min-width="160"
              ><template #default="scope">
                {{ scope.row.technologyParameter || "--" }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="平台名称"
              prop="platformName"
              :show-overflow-tooltip="true"
              min-width="160"
            /> -->

            <el-table-column
              label="备注"
              prop="remarks"
              :show-overflow-tooltip="true"
              min-width="160"
            />
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">甲方施工联系人列表</span>
          <div class="button">
            <el-button type="primary" @click.stop="handleContactOperate"
              ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
              >添加</el-button
            >
          </div>
        </template>
        <div class="contact-info">
          <!-- 表格数据 -->
          <el-table
            :data="projectForm.projectPracticeInfoRespVos"
            border
            height="180px"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <!-- 操作模式 -->
            <el-table-column
              label="操作"
              align="center"
              :show-overflow-tooltip="true"
              width="100px"
            >
              <!-- v-if="!operateType" -->
              <template #default="{ row, $index }">
                <div class="table-operate">
                  <img
                    src="@/assets/icons/images/edit.png"
                    class="table-icon"
                    title="编辑"
                    @click="handleOperate('edit', row, $index)"
                  />
                  <img
                    src="@/assets/icons/images/delete.png"
                    class="table-icon"
                    title="删除"
                    @click="handleOperate('delete', row, $index)"
                  />
                </div> </template
            ></el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="联系方式"
              prop="phone"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="备注"
              prop="remarks"
              :show-overflow-tooltip="true"
              min-width="160"
            />
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 添加销售清单 -->
    <el-dialog
      :title="operateType !== 'edit' ? '添加销售清单' : '编辑销售清单'"
      v-model="saleAddShow"
      style="margin-top: 20vh !important"
      width="1000px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :close="handleProjectBack"
    >
      <div></div>
      <template #footer>
        <el-form
          :model="saleForm"
          ref="saleFormRef"
          :rules="querySaleRules"
          label-width="100px"
          v-enterToNext
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="销售类目：" prop="saleCategory">
                <el-select
                  ref="refSelect"
                  @change="handleSaleCategory"
                  v-model="saleForm.saleCategory"
                  placeholder="请选择"
                  clearable
                  class="search-select"
                >
                  <el-option
                    v-for="dict in saleCategoryList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="saleForm.saleCategory === 0">
              <el-form-item label="设备名称：" prop="materialId">
                <el-select
                  v-model="saleForm.materialId"
                  style="width: 100%"
                  placeholder="请选择"
                  clearable
                  @change="handleDevice"
                  popper-class="search-select-option"
                  placement="left-end"
                >
                  <el-option key="0" label="" value="" disabled>
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        color: #8492a6;
                      "
                      >物料编号</span
                    >
                    <span style="margin: 0 42px 0 0px; color: #8492a6"
                      >物料名称</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        color: #8492a6;
                        font-size: 13px;
                      "
                      >采购名称</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 80px;
                        color: #8492a6;
                        font-size: 13px;
                      "
                      >销售名称</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;

                        color: #8492a6;
                        font-size: 13px;
                      "
                      >出厂型号</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        color: #8492a6;
                        font-size: 13px;
                      "
                      >销售型号</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;

                        color: #8492a6;
                        font-size: 13px;
                      "
                      >技术参数</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 60px;

                        color: #8492a6;
                        font-size: 13px;
                      "
                      >单位</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 125px;
                        color: #8492a6;
                        font-size: 13px;
                      "
                      >生产厂商</span
                    >
                  </el-option>
                  <el-option
                    v-for="item in deviceList"
                    :key="item.materialId"
                    :label="item.purchaseName"
                    :value="item.materialId"
                  >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        color: #8492a6;
                        transform: translateY(-10px);
                      "
                      >{{ item.materialCode }}</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        color: #8492a6;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.materialName"
                      >{{ item.materialName }}</span
                    >
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.purchaseName"
                    >
                      {{ item.purchaseName }}
                    </span>
                    <span
                      style="
                        display: inline-block;
                        width: 80px;
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.factoryCode"
                    >
                      {{ item.factoryCode }}
                    </span>
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        font-size: 13px;

                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.saleCode"
                    >
                      {{ item.saleCode }}
                    </span>
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.technologyParameter"
                    >
                      {{ item.technologyParameter }}
                    </span>
                    <span
                      style="
                        display: inline-block;
                        width: 100px;
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.technologyParameter"
                    >
                      {{ item.technologyParameter }}
                    </span>
                    <span
                      style="
                        display: inline-block;
                        width: 60px;
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.materialUnitName"
                    >
                      {{ item.materialUnitName }}
                    </span>
                    <span
                      style="
                        display: inline-block;
                        width: 125px;
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      :title="item.manufactureName"
                    >
                      {{ item.manufactureName }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="saleForm.saleCategory === 0">
              <el-form-item label="单位：">
                <el-input
                  disabled
                  v-model="saleForm.materialUnitName"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="saleForm.saleCategory === 0">
              <el-form-item label="技术参数：">
                <el-input
                  disabled
                  v-model="saleForm.technologyParameter"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="saleForm.saleCategory === 0">
              <el-form-item label="设备品牌：" prop="brand">
                <el-input
                  v-model="saleForm.brand"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="saleForm.saleCategory === 0">
              <el-form-item label="设备数量：" prop="quantity">
                <el-input
                  v-model="saleForm.quantity"
                  placeholder="请输入"
                  clearable
                  type="Number"
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <!-- </el-row>
              <el-row> -->

            <el-col :span="6" v-if="saleForm.saleCategory === 1">
              <el-form-item label="平台名称：">
                <el-input
                  v-model="saleForm.platformName"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注：">
                <el-input
                  maxlength="2000"
                  style="width: 96.2%"
                  v-model="saleForm.remarks"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                  @keyup.enter.stop="handleSaleAdd(saleFormRef)"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="height: 100px"></div>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            @click="handleSaleAdd(saleFormRef)"
            >保存</el-button
          >

          <el-button style="background-color: #fff" @click="handleSaleBack()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 添加甲方联系人 -->
    <el-dialog
      :title="operateType !== 'edit' ? '添加联系人' : '编辑联系人'"
      v-model="operateDialogShow"
      style="margin-top: 20vh !important"
      width="1000px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :close="handleProjectBack"
    >
      <div>
        <el-form
          :model="contactForm"
          ref="contactFormRef"
          :rules="queryContactRules"
          label-width="100px"
          v-enterToNext
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名：" prop="name">
                <el-input
                  ref="contactRefInput"
                  v-model="contactForm.name"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式：" prop="phone">
                <el-input
                  v-model="contactForm.phone"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注：">
                <el-input
                  maxlength="2000"
                  style="width: 100%"
                  v-model="contactForm.remarks"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                  @keyup.enter.stop="handleContactAdd(contactFormRef)"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <!--  class="customer-info" -->

        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            @click="handleContactAdd(contactFormRef)"
            >保存</el-button
          >

          <el-button style="background-color: #fff" @click="handleProjectBack()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import Upload from "@/components/Upload/index";
import { getDictsApi } from "@/api/dict";
import { getallMaterialListApi } from "@/api/information/material";
import {
  getBusScheduleListByProjectId,
  addbusSchedule,
  editbusSchedule,
} from "@/api/sales/marketing.js";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  // 操作类型
  rowdata: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits(["getBusScheduleList", "refreshList"]);

console.log("props.rowdata", props.rowdata);

// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);

// 校验规则
const queryRules = {
  includeContract: [
    { required: true, message: "请选择合同签订状态", trigger: "change" },
  ],
  content: [{ required: true, message: "请输入跟进内容", trigger: "blur" }],
  // nextFollowTime: [
  //   { required: true, message: "请选择下次跟进", trigger: "change" },
  // ],
};

let scheduleForm = ref({
  contractTemplate: [],
  projectPracticeInfoRespVos: [],
});

let pagestatus = ref("add");

let statusList = ref([]);
// 联系人操作类型
const operateType = ref("");
// 新增编辑弹窗显隐
const operateDialogShow = ref(false);
//甲方联系人表单
let contactForm = ref({});

// 销售项目类目列表
const saleCategoryList = ref([]);
// 设备列表
const deviceList = ref([]);

// 销售表单引用
const saleFormRef = ref();
// 联系人表单引用
const contactFormRef = ref();
// 进度表单引用
const scheduleFormRef = ref(null);
//完成表单引用
const formdataRef = ref(null);
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 销售清单当前索引(编辑销售清单使用)
const tableIndexSec = ref(null);
// 联系人表单校验规则
let queryContactRules = {
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 1, max: 15, message: "最多可输入15字", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
    { min: 1, max: 11, message: "最多可输入11字", trigger: "blur" },
  ],
};
// 新增销售列表表单显隐
const saleAddShow = ref(false);
//销售清单
let projectForm = ref({
  projectSaleInfoRespVos: [],
  projectPracticeInfoRespVos: [],
});

// 销售清单表单
let saleForm = ref({
  brand: "",
  saleName: "",
  materialId: null,
  materialUnit: null,
  materialUnitName: "",
  platformName: "",
  technologyParameter: "",
  projectId: null,
  projectSaleId: null,
  quantity: null,
  remarks: "",
  saleCategory: null,
  saleCategoryName: "",
});

let BusScheduleList = reactive([
  {
    name: "确认需求",
    fileInfoVos: [],
    businessSchedule: 1,
  },
  {
    name: "售前支持",
    fileInfoVos: [],
    businessSchedule: 2,
  },
  {
    name: "方案报价",
    fileInfoVos: [],
    businessSchedule: 3,
  },
  {
    name: "甲方立项",
    fileInfoVos: [],
    businessSchedule: 4,
  },
  {
    name: "启动招标",
    fileInfoVos: [],
    businessSchedule: 5,
  },
  {
    name: "项目投标",
    fileInfoVos: [],
    businessSchedule: 6,
  },
  {
    name: "合同谈判",
    fileInfoVos: [],
    businessSchedule: 7,
  },
  {
    name: "达成交易",
    fileInfoVos: [],
    businessSchedule: 8,
  },
  {
    name: "项目初验",
    fileInfoVos: [],
    businessSchedule: 9,
  },
  {
    name: "项目终验",
    fileInfoVos: [],
    businessSchedule: 10,
  },
]);

//左侧表单数据
let formdata = ref(BusScheduleList[0]);

// 销售清单表单校验规则
let querySaleRules = {
  saleCategory: [
    { required: true, message: "请选择销售类目", trigger: "change" },
  ],
  materialId: [
    { required: true, message: "请选择设备名称", trigger: "change" },
  ],
  quantity: [{ required: true, message: "请输入设备数量", trigger: "blur" }],
  brand: [{ required: true, message: "请输入设备品牌", trigger: "blur" }],
};

// 销售清单表单校验规则
let formdataqueryRules = {
  performance: [
    { required: true, message: "请选择是否完成", trigger: "change" },
  ],
  finishTime: [
    { required: true, message: "请选择完成时间", trigger: "change" },
  ],
};

let activeindex = ref(0);

let presentBusinessScheduleName = ref("");
let presentBusinessSchedule = ref(null);
/**
 * @description: 查询项目商务进度列表
 */
const getBusScheduleList = () => {
  getBusScheduleListByProjectId(props.rowdata.projectId).then((res) => {
    //甲方联系人
    if (res.data.projectPracticeInfoRespVos) {
      projectForm.value.projectPracticeInfoRespVos =
        res.data.projectPracticeInfoRespVos;
    }
    //销售清单
    if (res.data.projectSaleInfoRespVos) {
      projectForm.value.projectSaleInfoRespVos =
        res.data.projectSaleInfoRespVos;
    }
    if (res.data.projectBusinessScheduleRespVos.length != 0) {
      BusScheduleList = BusScheduleList.map((item, index) => {
        let obj = {};
        res.data.projectBusinessScheduleRespVos.find((jtem, index) => {
          if (jtem.businessSchedule == item.businessSchedule) {
            obj = {
              ...item,
              ...jtem,
            };
          } else {
            obj = {
              ...item,
            };
          }
          return jtem.businessSchedule == item.businessSchedule;
        });
        return obj;
      });
      formdata.value = BusScheduleList[0];
      pagestatus.value = "edit";
    } else {
    }
    scheduleForm.value.dateValue = [
      res.data.warrantyStartTime,
      res.data.warrantyEndTime,
    ];
    scheduleForm.value.includeContract = res.data.includeContract;
    presentBusinessScheduleName.value = res.data.presentBusinessScheduleName;
    presentBusinessSchedule.value = res.data.presentBusinessSchedule;
  });
};
/**
 * @description: 项目进度点击事件
 */
const handlerBusSchedule = async (item, index) => {
  if (formdata.value.performance == 1) {
    console.log("formdata.value", formdataRef.value);
    await formdataRef.value.validate(async (valid, fields) => {
      console.log("valid", valid);
      if (valid) {
        activeindex.value = index;
        formdata.value = item;
      }
    });
  } else {
    activeindex.value = index;
    formdata.value = item;
  }
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
function uploadSuccess(response) {
  formdata.value.fileInfoVos.push({ ...response, businessType: 31 });
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
function uploadRemove(index) {
  formdata.value.fileInfoVos.splice(index, 1);
}

/**
 * @description: 处理联系人操作
 */
let contactRefInput = ref(null);
const handleContactOperate = () => {
  operateDialogShow.value = true;
  operateType.value = "add";
  setTimeout(() => {
    contactRefInput.value.focus(); // 聚焦
  }, 500);
};

/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperate = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndex.value = tabIndex;
    contactForm.value = JSON.parse(JSON.stringify(row));
    // contactAddShow.value = true;
    operateDialogShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      contactRefInput.value.focus(); // 聚焦
    });
  } else {
    projectForm.value.projectPracticeInfoRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 新增、编辑联系人
 * @param {Object} contactFormRef 联系人表单引用
 */
const handleContactAdd = async (contactFormRef) => {
  if (!contactFormRef) return;
  await contactFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        projectForm.value.projectPracticeInfoRespVos[tableIndex.value] =
          JSON.parse(JSON.stringify(contactForm.value));
      } else {
        projectForm.value.projectPracticeInfoRespVos.push(
          JSON.parse(JSON.stringify({ ...contactForm.value }))
        );
      }
      contactForm.value = {
        name: "",
        phone: "",
        practiceId: null,
        projectId: null,
        remarks: "",
      };
      contactFormRef.resetFields();
      // nextTick(() => {
      //   contactRefInput.value.focus(); // 聚焦
      // });
      operateDialogShow.value = false;
    } else {
      console.log("error submit!");
    }
  });
  //   operateType.value = "";
};

/**
 * @description: 联系人返回
 */
const handleProjectBack = () => {
  contactForm.value = {
    name: "",
    phone: "",
    practiceId: null,
    projectId: null,
    remarks: "",
  };
  contactFormRef.value.resetFields();
  operateDialogShow.value = false;
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理销售清单操作
 */
const refSelect = ref(null);
const handleSaleOperate = () => {
  saleAddShow.value = true;
  operateType.value = "add";
  nextTick(() => {
    refSelect.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理销售清单表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperateSec = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndexSec.value = tabIndex;
    saleForm.value = JSON.parse(JSON.stringify(row));
    // saleAddShow.value = true;
    saleAddShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      refSelect.value.focus(); // 聚焦
    });
  } else {
    projectForm.value.projectSaleInfoRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 新增、编辑销售清单
 * @param {Object} saleFormRef 联售清单引用
 */
const handleSaleAdd = async (saleFormRef) => {
  if (!saleFormRef) return;
  await saleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        console.log("saleForm.value", saleForm.value);
        projectForm.value.projectSaleInfoRespVos[tableIndexSec.value] =
          JSON.parse(JSON.stringify(saleForm.value));
      } else {
        console.log("saleForm.value", saleForm.value);
        projectForm.value.projectSaleInfoRespVos.push(
          JSON.parse(JSON.stringify({ ...saleForm.value }))
        );
      }
      saleForm.value = {
        brand: "",
        saleName: "",
        materialId: null,
        materialUnit: null,
        materialUnitName: "",
        platformName: "",
        technologyParameter: "",
        projectId: null,
        projectSaleId: null,
        quantity: null,
        remarks: "",
        saleCategory: null,
        saleCategoryName: "",
      };
      saleAddShow.value = false;
      saleFormRef.resetFields();
    } else {
      console.log("error submit!");
    }
  });
};

/**
 * @description: 联系人返回
 */
const handleSaleBack = () => {
  saleForm.value = {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    projectId: null,
    projectSaleId: null,
    quantity: null,
    remarks: "",
    saleCategory: null,
    saleCategoryName: "",
  };
  saleFormRef.value.resetFields();
  saleAddShow.value = false;
};

/**
 * @description: 处理销售类目选择
 * @param {Number} value 当前值
 */
const handleSaleCategory = (value) => {
  saleCategoryList.value.forEach((item) => {
    if (item.value === value) {
      saleForm.value.saleCategoryName = item.label;
    }
  });
  const obj = {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    quantity: null,
    remarks: "",
  };
  saleForm.value = { ...saleForm.value, ...obj };
};

/**
 * @description: 处理设备名称选择
 * @param {Number} value 当前值
 */
const handleDevice = (value) => {
  if (value) {
    deviceList.value.forEach((item) => {
      if (value === item.materialId) {
        saleForm.value.saleName = item.saleName;
        saleForm.value.materialUnit = item.materialUnit;
        saleForm.value.materialUnitName = item.materialUnitName;
        saleForm.value.technologyParameter = item.technologyParameter;
        saleForm.value.purchaseName = item.purchaseName;
      }
    });
  } else {
    saleForm.value.saleName = "";
    saleForm.value.materialUnit = "";
    saleForm.value.materialUnitName = "";
    saleForm.value.technologyParameter = "";
    saleForm.value.purchaseName = "";
  }
};
/**
 * @description: 处理进度填报
 */
const handleraddbusSchedule = async () => {
  await scheduleFormRef.value.validate(async (valid, fields) => {
    console.log("valid", valid);
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          let array = BusScheduleList.filter((item, index) => {
            return item.performance !== undefined;
          });
          let obj = {
            businessSchedule:
              array.length == 0
                ? presentBusinessSchedule.value
                : array[array.length - 1].businessSchedule,
            projectBusinessScheduleAddInfoReqVos: array,
            projectId: props.rowdata.projectId,
            includeContract: scheduleForm.value.includeContract,
            warrantyStartTime: scheduleForm.value.dateValue[0],
            warrantyEndTime: scheduleForm.value.dateValue[1],
            projectPracticeInfoRespVos:
              projectForm.value.projectPracticeInfoRespVos,
            projectSaleInfoRespVos: projectForm.value.projectSaleInfoRespVos,
          };
          let Func;
          if (pagestatus.value == "edit") {
            Func = editbusSchedule;
          } else {
            Func = addbusSchedule;
          }
          Func(obj).then((res) => {
            if (res.code == 200) {
              ElMessage.success(res.msg);
              emit("update:followAddShow", false);
              emit("getBusScheduleList");
              emit("refreshList", props.rowdata);
            }
          });
        })
        .catch(() => {});
    }
  });
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  await getDictsApi("erp_include_contract").then((res) => {
    // 审核状态
    if (res.code === 200) {
      statusList.value = res.data;
    }
  });
  // 销售项目类目
  await getDictsApi("erp_sale_category").then((res) => {
    if (res.code === 200) {
      saleCategoryList.value = res.data;
    }
  });
  // 设备列表
  await getallMaterialListApi({}, {}).then((res) => {
    deviceList.value = res;
  });
}

onMounted(() => {
  getBusScheduleList();
  getDicts();
});

defineExpose({
  handleraddbusSchedule,
});
</script>

<style scoped lang="scss">
.schedule {
  height: 700px;
  overflow-y: scroll;
  .content {
    background: #ffffff;
    margin-bottom: 20px;
    .content-top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .content-title {
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        line-height: 42px;
      }
    }
    .content-bottom {
      display: flex;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      .item {
        width: 20%;
        display: flex;
        align-items: center;
      }
    }
  }
  .tooltip {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: rgba(217, 87, 0, 0.1);
    color: rgba(217, 87, 0, 1);
    margin-bottom: 20px;
    .text {
      margin-left: 20px;
    }
  }

  .schedule-form {
    margin: 30px 0;
    .form {
      display: flex;
      margin-top: 15px;
      background-color: #fafbff;
      .form-left {
        width: 20%;
        height: 100%;
        .item {
          background-color: #d9dce4;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid #f2f2f2;
          cursor: pointer;
        }
        .item:first-child {
          background-color: unset;
          font-size: 18px;
          font-weight: 700;
        }
        .activeitem {
          background-color: #007cef;
        }
      }
      .form-right {
        width: 85%;
        padding-left: 20px;
        border: 1px solid #f2f2f2;
        padding-right: 20px;

        .right-title {
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          font-weight: 700;
        }
        .subtitle {
          display: flex;
          align-items: center;
          margin: 12px 0;
          .dot {
            width: 13px;
            height: 13px;
            background-color: #0179ed;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
        .right-form {
          /* height: calc(100% - 50px); */
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
  }
  .contact-info {
    padding: 20px 0 20px 0;
  }
  .button {
    transform: translateX(1063px);
  }
  .marketbutton {
    transform: translateX(1110px);
  }
}
.schedule::-webkit-scrollbar {
  /* 滚动条样式 */
  display: none;
}
</style>

<style>
.el-popper.search-select-option {
  transform: translateX(-300px);
  .el-popper__arrow {
    left: 350px !important;
  }
}
</style>
